/* 进度条组件 - HarmonyOS设计指南实现 */

@import '../base/color.less';
@import '../base/font.less';
@import '../base/window.less';

/* 进度条变量 */
:root {
  --progress-height: calc(4 * var(--unit));
  --progress-height-small: calc(2 * var(--unit));
  --progress-height-large: calc(8 * var(--unit));
  --progress-border-radius: calc(2 * var(--unit));
  --progress-bg-color: var(--color-comp-background-tertiary);
  --progress-active-color: var(--color-brand);
  --progress-success-color: var(--color-confirm);
  --progress-warning-color: var(--color-alert);
  --progress-error-color: var(--color-waring);
  --progress-transition-duration: 0.3s;
  --progress-text-size: var(--font-size-caption-medium);
  --progress-text-gap: calc(8 * var(--unit));
}

/* 基础进度条样式 */
.progress {
  position: relative;
  width: 100%;
  height: var(--progress-height);
  background-color: var(--progress-bg-color);
  border-radius: var(--progress-border-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.progress-bar {
  height: 100%;
  background-color: var(--progress-active-color);
  border-radius: var(--progress-border-radius);
  transition: width var(--progress-transition-duration) ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: calc(4 * var(--unit));
  box-sizing: border-box;
  
  &.progress-bar-animated {
    background-image: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    background-size: 200% 100%;
    animation: progress-bar-stripes 1s linear infinite;
  }
  
  &.progress-bar-striped {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: calc(16 * var(--unit)) calc(16 * var(--unit));
  }
}

.progress-text {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--progress-text-size);
  color: var(--color-font-secondary);
  margin-left: var(--progress-text-gap);
  white-space: nowrap;
}

.progress-text-inner {
  font-size: var(--progress-text-size);
  color: var(--color-font-on-primary);
  font-weight: var(--font-weight-medium);
}

/* 进度条尺寸 */
.progress-small,
.progress.small {
  height: var(--progress-height-small);
  
  .progress-text {
    font-size: var(--font-size-caption-small);
  }
  
  .progress-text-inner {
    font-size: var(--font-size-caption-small);
  }
}

.progress-large,
.progress.large {
  height: var(--progress-height-large);
  
  .progress-text {
    font-size: var(--font-size-caption-large);
  }
  
  .progress-text-inner {
    font-size: var(--font-size-caption-large);
  }
}

/* 进度条颜色变体 */
.progress-success,
.progress.success {
  .progress-bar {
    background-color: var(--progress-success-color);
  }
}

.progress-warning,
.progress.warning {
  .progress-bar {
    background-color: var(--progress-warning-color);
  }
}

.progress-error,
.progress.error,
.progress.danger {
  .progress-bar {
    background-color: var(--progress-error-color);
  }
}

/* 圆形进度条 */
.progress-circle {
  position: relative;
  display: inline-block;
  width: calc(80 * var(--unit));
  height: calc(80 * var(--unit));
  
  svg {
    transform: rotate(-90deg);
  }
  
  .progress-circle-track {
    fill: none;
    stroke: var(--progress-bg-color);
    stroke-width: calc(8 * var(--unit));
  }
  
  .progress-circle-bar {
    fill: none;
    stroke: var(--progress-active-color);
    stroke-width: calc(8 * var(--unit));
    stroke-linecap: round;
    transition: stroke-dashoffset var(--progress-transition-duration) ease;
  }
  
  .progress-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-title-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-font-primary);
    text-align: center;
  }
  
  &.progress-circle-small {
    width: calc(60 * var(--unit));
    height: calc(60 * var(--unit));
    
    .progress-circle-track,
    .progress-circle-bar {
      stroke-width: calc(6 * var(--unit));
    }
    
    .progress-circle-text {
      font-size: var(--font-size-title-sub-medium);
    }
  }
  
  &.progress-circle-large {
    width: calc(100 * var(--unit));
    height: calc(100 * var(--unit));
    
    .progress-circle-track,
    .progress-circle-bar {
      stroke-width: calc(10 * var(--unit));
    }
    
    .progress-circle-text {
      font-size: var(--font-size-title-large);
    }
  }
}

/* 进度条动画 */
@keyframes progress-bar-stripes {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .progress {
    --progress-bg-color: var(--color-comp-background-tertiary);
  }
}

